<template>
  <div>
    <div class="list" ref="mvlists">
      <ul>
        <li v-for="(item, index) in mvlist" :key="index">
          <div
            class="imgb"
            v-show="playNum != index"
            @click="playVideo(index, item.id)"
          >
            <img :src="item.cover" />
            <div class="mask">
              <span class="iconfont icon-icon-1"></span>
            </div>
          </div>
          <div v-if="playNum == index">
            <video
              preload="metadata"
              @canplay="canplayfun"
              controls
              :src="item.mvurl"
            >
              <!-- <source
                src="http://vodkgeyttp8.vod.126.net/cloudmusic/obj/core/5199075199/5849160b6c1360a7b52847680b03136d.mp4?wsSecret=6dc0ed687ffc2eeadc898601acf670f7&wsTime=1618397231"
                type="video/mp4"
              /> -->
              <!-- <source :src="item.mvurl" type="video/mp4" />
              <source :src="item.mvurl" type="video/ogg" /> -->
              <!-- 您的浏览器不支持 HTML5 video 标签。 -->
            </video>
          </div>
          <div class="tit">
            <p>{{ item.name }}</p>
          </div>
        </li>
      </ul>
    </div>
    <van-overlay :show="show">
      <div class="wrapper" @click.stop>
        <van-loading type="spinner" />
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { getMvlist, getMvUrl } from "../api/mv.js";
export default {
  data() {
    return {
      mvlist: [],
      offset: 0, // 页码
      flag: true,
      playNum: null, //对应播放视频下标
      show: true,
    };
  },
  methods: {
    playVideo(index, id) {
      this.playNum = index;
      getMvUrl({ id }).then((data) => {
        if (data.code == 200) {
          this.$set(this.mvlist[index], "mvurl", data.data.url);
        }
      });
      //   console.log(this.mvlist);
    },
    canplayfun(event) {
      // console.log("播放吧", event);
      event.target.play();
    },
    add() {
      // 防抖: 阻止用户多次请求服务器
      if (this.flag) {
        this.flag = false;
        this.offset += 5;
        getMvlist({ limit: 5, offset: this.offset }).then((data) => {
          this.mvlist = this.mvlist.concat(data.data);
          this.flag = true;
        });
      }
    },
    handleScroll() {
      if (!this.show && this.$refs.mvlists) {
        let scrollTop =
          window.pageYOffset ||
          document.documentElement.scrollTop ||
          document.body.scrollTop; //滚动条偏移量
        let lis = this.$refs.mvlists.getElementsByTagName("li");
        let num = lis.length;
        let liHeight = lis[num - 3].offsetTop;
        if (scrollTop > liHeight) {
          //触发加载数据
          this.add();
        }
      }
    },
  },
  created() {
    getMvlist({ limit: 5 }).then((data) => {
      if (data.code == 200) {
        this.show = false;
        this.mvlist = data.data;
        // console.log(this.mvlist);
      }
    });
  },
  mounted() {
    this.$nextTick(() => {
      // 监听滚动事件
      window.addEventListener("scroll", this.handleScroll);
    });
  },
};
</script>

<style lang="less">
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.list {
  background-color: #bfe6ba59;
  padding: 10px;
  ul {
    li {
      overflow: hidden;
      height: 280px;
      padding: 10px;
      background-color: rgba(0, 0, 0, 0.46);
      border-radius: 2vw;
      margin-bottom: 10px;
      .imgb {
        height: 210px;
        position: relative;
        display: flex;
        img {
          width: 100%;
          height: 100%;
        }
        .mask {
          position: absolute;
          top: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.5);
          span {
            font-size: 20vw;
            color: rgba(255, 255, 255, 0.8);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }
      }
      video {
        width: 100%;
        height: 210px;
      }
      .tit {
        padding: 10px 0 0 3px;
        color: white;
        font-size: 4vw;
      }
    }
  }
}
</style>